<template>
  <div class="interviewer-container">
    <!-- <h1>面试官管理</h1> -->
    <div class="interviewer-content">
      <el-card>
        <!-- 搜索和操作区域 -->
        <div class="header-toolbar">
          <el-form :inline="true" :model="queryParams" class="search-form">
            <el-form-item label="面试官名称">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入面试官名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="专业领域">
              <el-input
                v-model="queryParams.expertise"
                placeholder="请输入专业领域"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="技能标签">
              <el-input
                v-model="queryParams.skills"
                placeholder="请输入技能标签"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="queryParams.status"
                placeholder="请选择状态"
                clearable
                style="width: 120px"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">
                <el-icon><Search /></el-icon>搜索
              </el-button>
              <el-button @click="resetQuery">
                <el-icon><Refresh /></el-icon>重置
              </el-button>
            </el-form-item>
          </el-form>
          
          <div class="operation-buttons">
            <el-button type="primary" @click="handleAdd">
              <el-icon><Plus /></el-icon>新增
            </el-button>
            <el-button type="warning" @click="handleExport">
              <el-icon><Download /></el-icon>导出
            </el-button>
          </div>
        </div>

        <!-- 表格区域 -->
        <el-table
          v-loading="loading"
          :data="interviewerList"
          border
          style="width: 100%"
          @row-click="handleRowClick"
        >
          <el-table-column prop="name" label="面试官" min-width="300">
            <template #default="{ row }">
              <div class="name-cell">
                <el-avatar
                  v-if="row.avatar"
                  :src="row.avatar"
                  :size="40"
                  class="avatar"
                />
                <el-avatar
                  v-else
                  :size="40"
                  class="avatar"
                  type="info"
                >
                  <el-icon><UserFilled /></el-icon>
                </el-avatar>
                <span class="name-text">{{ row.name }}</span>
                <video
                  v-if="row.videoPath"
                  :src="row.videoPath"
                  controls
                  class="video-preview"
                  @click.stop="previewVideo(row.videoPath)"
                ></video>
                <span v-else class="no-video">无视频</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="expertise" label="专业领域(职位)" min-width="200" />
          <el-table-column label="已面试次数" min-width="120">
            <template #default="{ row }">
              {{ (row.passedInterviews || 0) + (row.failedInterviews || 0) + (row.pendingInterviews || 0) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 0 ? 'success' : 'info'">
                {{ row.status === 0 ? '活跃' : '不活跃' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" min-width="160" />
          <el-table-column label="操作" min-width="150" fixed="right">
            <template #default="{ row }">
              <el-button size="small" @click.stop="handleUpdate(row)">
                <el-icon><Edit /></el-icon>编辑
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click.stop="handleDelete(row)"
              >
                <el-icon><Delete /></el-icon>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialog.visible"
      title="面试官详情"
      width="60%"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="面试官名称">{{ detailData.name }}</el-descriptions-item>
        <el-descriptions-item label="角色定位">{{ detailData.role }}</el-descriptions-item>
        <el-descriptions-item label="专业领域">{{ detailData.expertise }}</el-descriptions-item>
        <el-descriptions-item label="联系邮箱">{{ detailData.email }}</el-descriptions-item>
        <el-descriptions-item label="技能标签">
          <el-tag
            v-for="skill in detailData.skills?.split(',')"
            :key="skill"
            size="small"
            class="skill-tag"
          >
            {{ skill }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="性格特质">{{ detailData.personality }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="detailData.status === 0 ? 'success' : 'info'">
            {{ detailData.status === 0 ? '活跃' : '不活跃' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="生成温度">{{ detailData.temperature }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ detailData.updatedAt }}</el-descriptions-item>
        <el-descriptions-item label="面试统计" :span="2">
          <div class="interview-stats">
            <div class="stat-item">
              <span class="stat-label">总面试次数：</span>
              <span class="stat-value">{{ detailData.completedInterviews || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">通过面试：</span>
              <el-tag type="success">{{ detailData.passedInterviews || 0 }}</el-tag>
            </div>
            <div class="stat-item">
              <span class="stat-label">未通过面试：</span>
              <el-tag type="danger">{{ detailData.failedInterviews || 0 }}</el-tag>
            </div>
            <div class="stat-item">
              <span class="stat-label">待定面试：</span>
              <el-tag type="warning">{{ detailData.pendingInterviews || 0 }}</el-tag>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="头像" :span="2">
          <el-image
            v-if="detailData.avatar"
            :src="detailData.avatar"
            style="width: 100px; height: 100px"
            :preview-src-list="[detailData.avatar]"
          />
          <span v-else>无头像</span>
        </el-descriptions-item>
        <el-descriptions-item label="提示词模板" :span="2">{{ detailData.promptTemplate }}</el-descriptions-item>
        <el-descriptions-item label="备注信息" :span="2">{{ detailData.notes }}</el-descriptions-item>
        <el-descriptions-item label="视频" :span="2">
          <el-button
            v-if="detailData.videoPath"
            type="primary"
            link
            @click="previewVideo(detailData.videoPath)"
          >
            查看视频
          </el-button>
          <span v-else>无视频</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="isMobile ? '80%' : '60%'"
      class="interviewer-dialog"
      @close="cancel"
    >
      <el-form
        ref="interviewerFormRef"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="面试官名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入面试官名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色定位" prop="role">
              <el-input v-model="form.role" placeholder="请输入角色定位" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="专业领域" prop="expertise">
              <el-input v-model="form.expertise" placeholder="请输入专业领域" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入联系邮箱" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="技能标签" prop="skills">
              <el-input v-model="form.skills" placeholder="请输入技能标签，用逗号分隔" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性格特质" prop="personality">
              <el-input v-model="form.personality" placeholder="请输入性格特质" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="生成温度" prop="temperature">
              <div class="temperature-slider">
                <el-slider
                  v-model="form.temperature"
                  :min="0"
                  :max="1"
                  :step="0.1"
                  :format-tooltip="formatTemperature"
                  style="width: 100%"
                />
                <span class="temperature-value">{{ form.temperature }}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :value="0">活跃</el-radio>
                <el-radio :value="1">不活跃</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="头像" prop="avatar">
              <div class="avatar-container">
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-change="handleAvatarChange"
                  :auto-upload="false"
                  accept="image/jpeg,image/png,image/gif"
                >
                  <img v-if="form.avatar" :src="form.avatar" class="avatar-preview" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <div class="default-avatars-list">
                  <div
                    v-for="(avatar, index) in defaultAvatars"
                    :key="index"
                    class="default-avatar-item"
                    :class="{ active: form.avatar === avatar }"
                    @click="selectDefaultAvatar(avatar)"
                  >
                    <el-avatar :src="avatar" :size="40" />
                  </div>
                </div>
              </div>
              <div class="avatar-tip">支持jpg、png、gif格式，建议尺寸200x200px</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="提示词模板" prop="promptTemplate">
          <el-input
            v-model="form.promptTemplate"
            type="textarea"
            :rows="3"
            placeholder="请输入提示词模板"
          />
        </el-form-item>

        <el-form-item label="备注信息" prop="notes">
          <el-input
            v-model="form.notes"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>

        <el-form-item label="上传视频" prop="videoFile">
          <el-upload
            ref="uploadRef"
            class="video-uploader"
            action="#"
            :limit="1"
            :file-list="fileList"
            :before-upload="beforeVideoUpload"
            :on-change="handleVideoChange"
            :auto-upload="false"
            accept=".mp4,.webm"
          >
            <el-button type="primary">
              <el-icon><Upload /></el-icon>选择视频文件
            </el-button>
            <template #tip>
              <div class="el-upload__tip">请上传MP4或WEBM格式的视频文件</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 视频预览对话框 -->
    <el-dialog v-model="videoDialog.visible" title="视频预览" width="60%">
      <video
        v-if="videoDialog.url"
        :src="videoDialog.url"
        controls
        style="width: 100%"
      ></video>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search,
  Refresh,
  Plus,
  Download,
  Edit,
  Delete,
  Upload,
  VideoPlay,
  UserFilled,
  User,
  Avatar
} from '@element-plus/icons-vue'
import {
  getInterviewerList,
  addInterviewer,
  updateInterviewer,
  deleteInterviewer,
  uploadVideo,
  exportInterviewer,
  uploadAvatar
} from '@/api/interviewerApi.js'

// 表格数据
const interviewerList = ref([])
const loading = ref(false)
const total = ref(0)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  name: '',
  expertise: '',
  skills: '',
  status: undefined
})

// 状态选项
const statusOptions = [
  { value: 0, label: '活跃' },
  { value: 1, label: '不活跃' }
]

// 表单数据
const form = reactive({
  id: undefined,
  name: '',
  role: '',
  email: '',
  expertise: '',
  skills: '',
  status: 0,
  notes: '',
  avatar: '',
  personality: '',
  promptTemplate: '',
  temperature: 0.70,
  videoFile: null
})

// 表单验证规则
const rules = reactive({
  name: [{ required: true, message: '请输入面试官名称', trigger: 'blur' }],
  role: [{ required: true, message: '请输入角色定位', trigger: 'blur' }],
  expertise: [{ required: true, message: '请输入专业领域', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  skills: [{ required: true, message: '请输入技能标签', trigger: 'blur' }],
  personality: [{ required: true, message: '请输入性格特质', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  temperature: [
    { required: true, message: '请输入生成温度', trigger: 'blur' },
    { type: 'number', min: 0, max: 1, message: '温度值必须在0-1之间', trigger: 'blur' }
  ]
})

// 文件列表
const fileList = ref([])

// 对话框控制
const dialog = reactive({
  visible: false,
  title: ''
})

// 视频预览对话框
const videoDialog = reactive({
  visible: false,
  url: ''
})

// 存储原始视频路径
const videoPathMap = new Map()

// 表单引用
const interviewerFormRef = ref(null)
const uploadRef = ref(null)

// 详情对话框数据
const detailDialog = reactive({
  visible: false
})

const detailData = reactive({
  id: undefined,
  name: '',
  role: '',
  email: '',
  expertise: '',
  skills: '',
  status: 0,
  notes: '',
  avatar: '',
  videoPath: '',
  personality: '',
  promptTemplate: '',
  temperature: 0.70,
  createdAt: '',
  updatedAt: ''
})

// 默认头像列表
const defaultAvatars = [
  'public/avatars/1.jpeg',
  '/avatars/2.jpg',
  '/avatars/3.jpg',
  '/avatars/4.jpeg',
  '/avatars/5.jpg',
  '/avatars/6.jpeg'
]

// 选择默认头像
const selectDefaultAvatar = (avatar) => {
  form.avatar = avatar
}

// 修改重置表单函数
const resetForm = () => {
  if (interviewerFormRef.value) {
    interviewerFormRef.value.resetFields()
  }
  // 重置所有表单字段为初始值
  Object.assign(form, {
    id: undefined,
    name: '',
    role: '',
    email: '',
    expertise: '',
    skills: '',
    status: 0,
    notes: '',
    personality: '',
    promptTemplate: '',
    temperature: 0.70,
    videoFile: null,
    avatar: '' // 重置头像为空字符串
  })
  fileList.value = []
}

// 初始化数据
onMounted(() => {
  fetchInterviewerList()
})

// 获取面试官列表
const fetchInterviewerList = async () => {
  try {
    loading.value = true
    const res = await getInterviewerList(queryParams)
    // 处理返回的数据，确保skills字段格式正确
    interviewerList.value = res.data.records.map(item => {
      // 保存原始视频路径
      if (item.videoPath) {
        videoPathMap.set(item.id, item.videoPath)
      }
      return {
        ...item,
        skills: Array.isArray(item.skills) ? 
          (item.skills.length > 0 && typeof item.skills[0] === 'object' ? 
            item.skills.map(skill => skill.name || skill.value || '').filter(Boolean).join(',') : 
            item.skills.join(',')) : 
          item.skills
      }
    })
    total.value = res.data.total
  } catch (error) {
    console.error('获取面试官列表失败:', error)
    ElMessage.error('获取面试官列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1
  fetchInterviewerList()
}

// 重置搜索
const resetQuery = () => {
  queryParams.pageNum = 1
  queryParams.name = ''
  queryParams.expertise = ''
  queryParams.skills = ''
  queryParams.status = undefined
  fetchInterviewerList()
}

// 分页大小变化
const handleSizeChange = (val) => {
  queryParams.pageSize = val
  fetchInterviewerList()
}

// 当前页变化
const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  fetchInterviewerList()
}

// 新增面试官
const handleAdd = () => {
  resetForm()
  dialog.title = '新增面试官'
  dialog.visible = true
}

// 编辑面试官
const handleUpdate = (row) => {
  resetForm()
  
  // 处理skills字段
  let skillsValue = ''
  if (Array.isArray(row.skills)) {
    if (row.skills.length > 0) {
      if (typeof row.skills[0] === 'object') {
        skillsValue = row.skills.map(skill => 
          skill.name || skill.value || skill.label || skill.text || skill.id || ''
        ).filter(Boolean).join(',')
      } else {
        skillsValue = row.skills.join(',')
      }
    }
  } else if (typeof row.skills === 'string') {
    skillsValue = row.skills
  }
  
  // 处理头像数据
  let avatarData = row.avatar
  if (avatarData) {
    // 检查是否是默认头像
    const isDefaultAvatar = defaultAvatars.includes(avatarData)
    if (!isDefaultAvatar) {
      // 如果不是默认头像，保持原样
      avatarData = row.avatar
    }
  }
  
  const formData = {
    ...row,
    skills: skillsValue,
    avatar: avatarData
  }
  Object.assign(form, formData)
  dialog.title = '编辑面试官'
  dialog.visible = true
}

// 删除面试官
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确认删除该面试官吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await deleteInterviewer(row.id)
    ElMessage.success('删除成功')
    fetchInterviewerList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 取消对话框
const cancel = () => {
  dialog.visible = false
  resetForm()
}

// 提交表单
const submitForm = async () => {
  try {
    await interviewerFormRef.value.validate()
    
    // 处理skills字段
    let skillsValue = ''
    if (Array.isArray(form.skills)) {
      if (form.skills.length > 0) {
        if (typeof form.skills[0] === 'object') {
          skillsValue = form.skills.map(skill => 
            skill.name || skill.value || skill.label || skill.text || skill.id || ''
          ).filter(Boolean).join(',')
        } else {
          skillsValue = form.skills.join(',')
        }
      }
    } else if (typeof form.skills === 'string') {
      skillsValue = form.skills
    }
    
    // 保存基本信息
    const apiMethod = form.id ? updateInterviewer : addInterviewer
    const submitData = {
      id: form.id,
      name: form.name,
      role: form.role,
      email: form.email,
      expertise: form.expertise,
      skills: skillsValue,
      status: form.status,
      notes: form.notes,
      personality: form.personality,
      promptTemplate: form.promptTemplate,
      temperature: form.temperature,
      avatar: form.avatar
    }
    
    console.log('提交的数据:', submitData)
    const res = await apiMethod(submitData)
    console.log('API响应:', res)
    
    if (res.code === 200) {
      // 上传视频
      if (form.videoFile) {
        try {
          const formData = new FormData()
          formData.append('file', form.videoFile)
          formData.append('id', form.id || res.data)
          
          const uploadRes = await uploadVideo(formData)
          if (uploadRes.code !== 200) {
            throw new Error(uploadRes.message || '视频上传失败')
          }
          
          ElMessage.success('视频上传成功')
        } catch (error) {
          console.error('视频上传失败:', error)
          ElMessage.warning('基本信息保存成功，但视频上传失败：' + (error.message || '未知错误'))
        }
      }
      
      ElMessage.success(form.id ? '更新成功' : '新增成功')
      dialog.visible = false
      fetchInterviewerList()
    } else {
      ElMessage.error(res.message || '操作失败')
    }
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error(error.message || '提交失败')
  }
}

// 视频上传前校验
const beforeVideoUpload = (file) => {
  const isVideo = file.type === 'video/mp4' || file.type === 'video/webm'
  const isLt100M = file.size / 1024 / 1024 < 100
  
  if (!isVideo) {
    ElMessage.error('请上传MP4或WEBM格式的视频文件')
    return false
  }
  if (!isLt100M) {
    ElMessage.error('视频大小不能超过100MB')
    return false
  }
  return true
}

// 视频文件变化
const handleVideoChange = (file) => {
  if (file) {
    form.videoFile = file.raw
  }
}

// 导出数据
const handleExport = async () => {
  try {
    const res = await exportInterviewer(queryParams)
    const url = window.URL.createObjectURL(new Blob([res]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', '面试官数据.xlsx')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败')
  }
}

// 预览视频
const previewVideo = (url) => {
  if (!url) {
    ElMessage.warning('视频地址不存在')
    return
  }
  videoDialog.url = url
  videoDialog.visible = true
}

// 在 script setup 部分添加格式化函数
const formatTemperature = (val) => {
  return val.toFixed(1)
}

// 点击行查看详情
const handleRowClick = (row) => {
  Object.assign(detailData, row)
  detailDialog.visible = true
}

// 头像上传前校验
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isImage) {
    ElMessage.error('请上传jpg、png、gif格式的图片')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB')
    return false
  }
  return true
}

// 头像文件变化
const handleAvatarChange = async (file) => {
  if (file) {
    try {
      // 创建FormData对象
      const formData = new FormData()
      formData.append('file', file.raw)
      formData.append('id', form.id)

      // 调用上传头像接口
      const res = await uploadAvatar(formData)
      if (res.code === 200) {
        form.avatar = res.data
        ElMessage.success('头像上传成功')
      } else {
        ElMessage.error(res.message || '头像上传失败')
      }
    } catch (error) {
      console.error('头像上传失败:', error)
      ElMessage.error('头像上传失败：' + (error.message || '未知错误'))
    }
  }
}

// 添加移动端检测
const isMobile = computed(() => {
  return window.innerWidth <= 768
})

// 监听窗口大小变化
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth <= 768
})
</script>

<style scoped>
.interviewer-container h1 {
  font-size: 24px;
  font-weight: 500;
}

.interviewer-content {
  margin-top: 20px;
}

.header-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.search-form .el-form-item {
  margin-bottom: 10px;
  margin-right: 10px;
}

.search-form .el-input {
  width: 180px;
}

.search-form .el-select {
  width: 120px;
}

.operation-buttons {
  margin-left: 20px;
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.video-uploader {
  width: 100%;
}

.skill-tag {
  margin-right: 4px;
  margin-bottom: 4px;
}

.el-table {
  margin-top: 20px;
  width: 100% !important;
}

.el-table .cell {
  white-space: nowrap;
  padding: 8px 12px;
}

.temperature-slider {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.temperature-value {
  min-width: 40px;
  text-align: right;
  color: #606266;
  font-size: 14px;
}

.el-slider {
  flex: 1;
}

:deep(.el-descriptions__label) {
  width: 120px;
  justify-content: flex-end;
}

:deep(.el-descriptions__content) {
  padding: 12px 15px;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__row) {
  cursor: pointer;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.avatar {
  flex-shrink: 0;
  border: 1px solid #ebeef5;
}

.name-text {
  min-width: 100px;
}

.video-preview {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  background-color: #000;
}

.no-video {
  color: #909399;
  font-size: 14px;
}

:deep(.el-table__row) {
  height: auto !important;
}

:deep(.el-table__cell) {
  padding: 8px !important;
}

/* 确保视频播放器在表格中正确显示 */
:deep(.el-table__body-wrapper) {
  overflow-x: auto;
}

:deep(.el-table__body) {
  width: 100% !important;
}

.avatar-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.default-avatars-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px;
}

.default-avatar-item {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.default-avatar-item:hover {
  background-color: #f5f7fa;
  transform: translateY(-2px);
}

.default-avatar-item.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.default-avatar-item .el-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.default-avatar-item .el-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar-preview {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.avatar-tip {
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
}

.avatar-text {
  font-size: 12px;
  color: #606266;
  margin-top: 4px;
  text-align: center;
}

:deep(.el-avatar) {
  background-color: #f0f2f5;
  color: #606266;
}

:deep(.el-avatar--primary) {
  background-color: #409eff;
  color: #fff;
}

:deep(.el-avatar--success) {
  background-color: #67c23a;
  color: #fff;
}

:deep(.el-avatar--warning) {
  background-color: #e6a23c;
  color: #fff;
}

:deep(.el-avatar--danger) {
  background-color: #f56c6c;
  color: #fff;
}

:deep(.el-avatar--info) {
  background-color: #909399;
  color: #fff;
}

.interview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

.stat-value {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .interviewer-container {
    padding: 12px;
  }

  .query-form {
    padding: 12px;
  }

  .query-form :deep(.el-form-item) {
    margin-bottom: 12px;
  }

  .query-form :deep(.el-input__wrapper),
  .query-form :deep(.el-select) {
    width: 100%;
  }

  .operation-area {
    flex-direction: column;
    gap: 12px;
  }

  .operation-area .el-button {
    width: 100%;
  }

  .interviewer-dialog :deep(.el-dialog) {
    max-width: 80vw !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  .interviewer-dialog :deep(.el-dialog__body) {
    padding: 12px;
  }
  .interviewer-dialog :deep(.el-form-item) {
    margin-bottom: 8px !important;
  }
}
</style>